<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            border: 1px solid #000;
            text-align: center;
            width: 300px;
        }

        th,
        td {
            border: 1px solid #000;
        }

        h3 {
            position: relative;
        }

        span {
            position: absolute;
            left: 145px;
            top: -4px;
            width: 16px;
            height: 16px;
            color: white;
            font-size: 12px;
            text-align: center;
            border-radius: 50%;
            background-color: #e63f32;
        }
    </style>
    </style>
</head>

<body>
    <!--
        computed 计算属性 vs methods 方法

        computed 计算属性:
            作用:封装了一段对于数据的处理，求得一个结果语法:
            * 写在 computed 配置项中
            * 作为属性，直接使用 this.计算属性  {{计算属性}}
            
            * 缓存特性 (提升性能) :计算属性会对计算出来的结果缓存，
              再次使用直接读取缓存依赖项变化了，会自动重新计算并再次缓存

        methods 方法:
            作用:给实例提供一个方法，调用以处理业务逻辑语法:
            * 写在 methods 配置项中
            * 作为方法，需要调用 
                   this.方法名() 
                   {{ 方法名() }}
                   @事件名="方法名
    -->
    <div id="app">
        <h3>小黑的礼物清单🛒<span>{{ totalCount }}</span></h3>
        <h3>小黑的礼物清单🛒<span>{{ totalCount }}</span></h3>
        <h3>小黑的礼物清单🛒<span>{{ totalCount }}</span></h3>
        <h3>小黑的礼物清单🛒<span>{{ totalCount }}</span></h3>

        <h3>小黑的礼物清单🛒<span>{{ totalCountFn() }}</span></h3>
        <h3>小黑的礼物清单🛒<span>{{ totalCountFn() }}</span></h3>
        <h3>小黑的礼物清单🛒<span>{{ totalCountFn() }}</span></h3>
        <h3>小黑的礼物清单🛒<span>{{ totalCountFn() }}</span></h3>
        
        <table>
            <tr>
                <th>名字</th>
                <th>数量</th>
            </tr>
            <tr v-for="(item, index) in list" :key="item.id">
                <td>{{item.name}}</td>
                <td>{{item.num}}</td>
            </tr>
        </table>
        <!-- 目标：统计求和，求得礼物总数 -->
        <p>礼物总数：{{ totalCount }} 个</p>

    </div>

    <script src="../lib/vue.js"></script>

    <script>
        const app = new Vue({
            el: "#app",
            data() {
                return {
                    // 现有的数据
                    list: [
                        { id: 1, name: '篮球', num: 1 },
                        { id: 2, name: '玩具', num: 2 },
                        { id: 3, name: '铅笔', num: 5 },
                    ]
                }
            },
            methods: {
                totalCountFn() {
                    console.log("methods执行了")
                    let total = this.list.reduce((sum, item) => sum + item.num, 0)
                    return total
                }
            },
            computed: {
                // 基于现有的数据，编写求值逻辑
                // 计算属性函数内部，可以直接通过 this 访问到 app 实例

                // 需求：对 this.list 数组里面的 num 进行求和 -- reduce

                // 计算属性：有缓存的，一旦计算出来结果，就会立刻缓存
                // 下一次读取 → 直接读缓存就行 → 性能特别高
                totalCount() {
                    console.log("计算属性执行了")
                    let total = this.list.reduce((sum, item) => sum + item.num, 0)
                    return total
                }
            }
        })
    </script>
</body>

</html>